<template>
  <div class="dept_main">
    <div class="all_main">
      <!-- 左右调整容器 -->
      <dragdrop :width="140" :widthLeft="'140px'">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="dept_list_title">
                <span>部门列表</span>
              </div>
              <div class="dept_option" align="left" v-if="isauth('dept_edit')">
                <el-row>
                  <el-col :span="8">
                    <el-button @click="adddept()" type="primary" size="mini">新增</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="deleteHandle()" type="primary" size="mini">删除</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="exportexeclto('print')" type="primary" size="mini">打印</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="openImportDialog()" type="primary" size="mini">导入</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="exportexeclto()" type="primary" size="mini">导出</el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="department_tree">
                  <!-- :default-checked-keys="idArr" -->
                  <!-- :default-expand-all="defaultExpandAll" -->
                <el-tree
                  :data="deptTree"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  :expand-on-click-node="false"
                  :highlight-current="true"
                  :indent="1"
                  node-key="pkDepartmentId"
                  :default-expanded-keys="idArr"
                ></el-tree>
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div :span="16" class="all_right">
            <div class="grid-content bg-purple">
              <div class="dept_details_title">
                <span>部门详细信息</span>
              </div>
              <el-row class="dept_info">
                <el-col :span="8">
                  <div class="grid-content bg-purple-dark">
                    <el-form :model="deptForm" :rules="deptRule" ref="deptForm" label-width="80px">
                      <el-form-item label="上级部门" prop="parentDepartmentName">
                        <el-col>
                          <el-select
                            id="deptSelect"
                            v-model="deptForm.parentDepartmentName"
                            clearable
                            placeholder
                            style="width: 100%"
                            size="mini"
                            @change="currentSel"
                            :disabled="btn_save_disabled"
                          >
                            <el-option
                              v-for="item in parentDeptForm"
                              :key="item.departmentGuid"
                              :label="item.departmentName"
                              :value="item.departmentGuid"
                            ></el-option>
                          </el-select>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="部门名称" prop="departmentName">
                        <el-col>
                          <el-input
                            v-model="deptForm.departmentName"
                            placeholder
                            size="mini"
                            maxlength="20"
                            :disabled="btn_save_disabled"
                          ></el-input>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="负责人" prop="departmentDirector">
                        <el-col>
                          <el-input
                            v-model="deptForm.departmentDirector"
                            placeholder
                            size="mini"
                            maxlength="20"
                            :disabled="btn_save_disabled"
                          ></el-input>
                        </el-col>
                      </el-form-item>
                      <el-form-item v-if="isauth('dept_edit')">
                        <el-button
                          type="primary"
                          @click="Edit()"
                          size="mini"
                          :disabled="btn_edit_disabled"
                        >编辑</el-button>
                        <el-button
                          type="primary"
                          @click="FormSubmit()"
                          size="mini"
                          :disabled="btn_save_disabled"
                        >保存</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </template>
      </dragdrop>

      <!-- <el-col :span="1" class="blank_filling">
        <div class="bg-purple">

        </div>
      </el-col>-->
    </div>
    <!-- 新增弹窗 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDeptTree"></add-or-update>
    <el-dialog
      title="部门信息导入"
      :visible.sync="importDialog"
      width="800px"
      center
      :close-on-click-modal="false"
      :before-close="closeDialogImport"
    >
      <div class="grid-content bg-purple" v-if="importDialog">
        <!-- 目前不需要归属部门，此处隐藏归属部门的显示 -->
        <!-- 当前选择部门：
        <span style="display:inline-block;font-weight:bold;">" {{departmentName}} "</span> , 批量导入的部门都会归属到当前选择的部门中。-->
        <!-- <div style="display:inline-block;font-weight:bold;">{{dialogTips}}</div> -->
        <div class="header_select">
          <div>
            <el-button type="primary" @click="thetemplate()" size="mini">execl模板下载</el-button>
          </div>
          <div class="bulk_import">
            <el-upload
              class="upload-demo"
              action
              :on-change="handleChange"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :file-list="fileListUpload"
              :limit="limitUpload"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              :auto-upload="false"
            >
              <el-button type="primary" @click="handleclickto()" size="mini">浏览文件</el-button>
            </el-upload>
          </div>
          <div class="packge_batch">
            <el-button type="primary" @click="packgebatchto(tableChecked)" size="mini">导入数据</el-button>
          </div>
        </div>
        <el-table
          v-if="table1"
          :data="changestudentlist"
          :stripe="true"
          style="width: 100%"
          border="border"
          :header-cell-style="headFirst"
          highlight-current-row
          @selection-change="handleSelectionChange"
          :show-overflow-tooltip="true"
          key="table1"
          ref="deptTable"
          height="416"
          v-loading="importLoad"
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column label="错误原因" prop="error" v-if="isError"></el-table-column>
          <el-table-column label="部门名称" prop="departmentName"></el-table-column>
          <el-table-column label="上级部门" prop="parentDepartmentName"></el-table-column>
          <el-table-column label="负责人" prop="departmentDirector"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './dept-add-update'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { JSEncrypt } from 'jsencrypt'
export default {
  data() {
    return {
      // 表格加载
      importLoad: false,
      isError: false,
      dialogTips: '',
      deptTree: [],
      deptTable: [],
      defaultProps: {
        label: 'departmentName'
      },
      deptForm: {
        departmentDirector: '',
        departmentGuid: '',
        departmentName: '',
        isDelete: 0,
        parentDepartmentGuid: '',
        parentDepartmentName: '',
        pkDepartmentId: 0,
        syncState: 0,
        unitGuid: '',
        userGuid: ''
      },
      unitGuid: '',
      userGuid: '',
      idArr: [null],
      departmentGuid: '',
      departmentName: '',
      parentDepartmentGuid: '',
      parentDepartmentName: '',
      addOrUpdateVisible: false,
      btnDisabled: true,
      defaultExpandAll: true,
      deptRule: {
        departmentName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ]
      },
      parentDeptForm: [],
      btn_save_disabled: true,
      btn_edit_disabled: true,
      importDialog: false,
      limitUpload: 1,
      table1: true,
      fileListUpload: [],
      tableChecked: [],
      changestudentlist: []
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.unitGuid = this.$store.state.user.changeschoolid
    this.userGuid = sessionStorage.getItem('administrator')
  },
  mounted() {
    this.getDeptTree()
  },
  methods: {
    //打开导入窗体
    openImportDialog() {
      if (this.departmentName == '') {
        this.dialogTips = '未选择归属部门'
      } else {
        this.dialogTips =
          '当前选中部门： ' +
          this.departmentName +
          ' ，批量导入的部门都会归属到当前选中的部门中'
      }
      this.importDialog = true
    },
    //导入函数
    importfxx(obj) {
      // 把错误号去除
      this.isError = false
      let _this = this
      // 通过DOM取文件数据
      this.file = obj
      var rABS = false //是否将文件读取为二进制字符串
      var f = this.file
      var reader = new FileReader()
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = ''
        var rABS = false //是否将文件读取为二进制字符串
        var pt = this
        var wb //读取完成的数据
        var outdata
        var reader = new FileReader()
        reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result)
          var length = bytes.byteLength
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i])
          }
          var XLSX = require('xlsx')
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: 'base64'
            })
          } else {
            wb = XLSX.read(binary, {
              type: 'binary'
            })
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) //outdata就是你想要的东西
          this.da = [...outdata]
          let arr = []
          let is = 0

          this.da.map(v => {
            let obj = {}
            obj.departmentDirector = v['负责人']
            obj.departmentName = v['部门名称']
            obj.parentDepartmentName = v['上级部门']
            obj.parentDepartmentGuid = v['上级部门']
            // if (obj.parentDepartmentName == null) {
            //   obj.parentDepartmentName = _this.departmentName;
            // }
            // if (obj.parentDepartmentGuid == null) {
            //   obj.parentDepartmentGuid = _this.departmentGuid;
            // }
            if (!obj.departmentName) {
              is++
            } else {
              arr.push(obj)
            }
          })
          _this.studentlist = [...arr]
          let arrto = JSON.parse(JSON.stringify(_this.studentlist))
          if (is) {
            _this.$message({
              message: `已预览${arrto.length}条数据，忽略了${is}条未填写部门名称的数据`,
              type: 'warning'
            })
          }
          _this.changestudentlist = arrto
        }
        reader.readAsArrayBuffer(f)
      }

      if (rABS) {
        reader.readAsArrayBuffer(f)
      } else {
        reader.readAsBinaryString(f)
      }
    },
    //导入表格选择变更
    handleSelectionChange(val) {
      this.tableChecked = val
    },
    //导入
    packgebatchto() {
      if (this.importLoad) {
        this.$message({
          showClose: true,
          message: '正在批量充值请勿重复操作',
          type: 'warning',
          duration: '500'
        })
        return false
      }
      if (this.tableChecked[0] && this.tableChecked[0].error) {
        this.$message({
          message: '数据非法',
          type: 'warning'
        })
        return
      }
      let tableCheckedto = JSON.parse(JSON.stringify(this.tableChecked))
      console.log(tableCheckedto)
      if (tableCheckedto.length == 0) {
        this.$message({
          message: '没有批量数据',
          type: 'warning'
        })
        return false
      }
      this.importLoad = true
      // 这个请求的超时时间是5分钟
      this.$httpblob({
        url: this.$httpblob.adornUrl('/department/excel-department-add'),
        method: 'post',
        data: this.$httpblob.adornData({
          messageContent: {
            excelFromList: tableCheckedto,
            parentDepartmentGuid: this.departmentGuid,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.importLoad = false
        if (data.messageCode == 500) {
          this.$message({
            message: data.errorMessage,
            type: 'warning'
          })
        }
        if (data.messageCode == 200) {
          if (data.messageContent.length != 0) {
            this.isError = true
            this.$message({
              message: '部分数据批量录入成功',
              type: 'warning'
            })
            this.changestudentlist = data.messageContent
            this.$nextTick(() => {
              this.$refs['deptTable'].doLayout()
            })
          } else {
            this.isError = false
            this.$message({
              message: '批量录入成功',
              type: 'success'
            })
            this.importDialog = false
          }
          this.getDeptTree()
          // this.table1 = false;
          // this.tablelist = data.messageContent;
          // this.$message({
          //   message: "批量录入成功",
          //   type: "success",
          // });
          // this.closeDialogImport();
          // this.getDeptTree();
        }
      })
    },
    handleclickto() {},
    //导入excel相关
    handleRemove(file, fileList) {
      console.log(3)
      this.isError = false
      this.changestudentlist = []
      this.fileTemp = null
    },
    //导入excel相关
    handleExceed(file, fileList) {
      fileList[0].name = file[0].name
      this.fileTemps = file[0]
      if (this.fileTemps) {
        if (
          this.fileTemps.type ==
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          this.fileTemps.type == 'application/vnd.ms-excel'
        ) {
          this.changestudentlist = []
          this.table1 = true
          this.importfxx(
            this.fileTemps,
            this.departmentName,
            this.departmentGuid
          )
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },
    //导入excel相关
    handleChange(file, fileList) {
      console.log(1)
      this.fileTemp = file.raw
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          this.fileTemp.type == 'application/vnd.ms-excel'
        ) {
          this.changestudentlist = []
          ;(this.table1 = true), this.importfxx(this.fileTemp)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },
    //excel模板下载
    thetemplate() {
      this.$http({
        url: this.$http.adornUrl('/department/poi-department-model-download'),
        method: 'post',
        data: this.$http.adornData({}),
        responseType: 'blob'
      }).then(({ data }) => {
        this.downloadFile(data)
      })
    },
    downloadFile(data) {
      // 文件导出
      if (!data) {
        return
      }
      const nowtime = this.getimeto()
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', '部门信息批量模板.xlsx')
      document.body.appendChild(link)
      link.click()
    },
    //关闭导入窗口
    closeDialogImport() {
      this.changestudentlist = []
      this.isError = false
      this.importDialog = false
    },

    //导出或打印部门
    async exportexeclto(type) {
      if (this.deptTree.length == 0) {
        this.$message({
          message: '请查询数据后在进行操作',
          type: 'warning'
        })
        return false
      }
      this.agentlistout = await this.outexecel()
      if (type == 'print') {
        this.printJS()
      } else {
        this.export2Excel()
      }
    },
    // 打印
    printJS() {
      let someJSONdata = this.agentlistout
      const title = '部门信息'
      this.unitName = sessionStorage.getItem('unitName')
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          this.getNowTime('yy-mm-dd')
        ),
        printable: someJSONdata,
        properties: [
          {
            displayName: '部门名称',
            field: 'departmentName'
          },
          {
            displayName: '上级部门',
            field: 'parentDepartmentName'
          },
          {
            displayName: '负责人',
            field: 'departmentDirector'
          }
        ],
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1
        // style: style,
      })
    },

    // 异步获取所有部门数据
    outexecel() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/department/query-department-info'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                unitGuid: _this.unitGuid
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              let listArr = data.messageContent
              console.log(listArr)
              for (var i = 0; i < listArr.length; i++) {
                if (listArr[i].departmentName == null) {
                  listArr[i].departmentName = ''
                }
                if (listArr[i].parentDepartmentName == null) {
                  listArr[i].parentDepartmentName = ''
                }
              }
              resolve(listArr)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    export2Excel() {
      console.log(1)
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        let multiHeader = []
        let merges = []
        const tHeader = ['部门名称', '上级部门', '负责人']
        const filterVal = [
          'departmentName',
          'parentDepartmentName',
          'departmentDirector'
        ]
        const list = this.agentlistout
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: '部门信息列表' + nowtime + ''
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    currentSel(selVal) {
      this.deptForm.parentDepartmentGuid = selVal
    },
    getParentDeptList() {
      this.parentDeptForm = []
      this.$http({
        url: this.$http.adornUrl('/department/department-not-children'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            agentGuid: this.userGuid,
            departmentGuid: this.deptForm.departmentGuid,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.parentDeptForm = data.messageContent
          // console.log(data.messageContent);
        } else {
          this.$message.error(data.errorMessage)
          this.searchInfo1 = {}
        }
      })
    },
    getParentDeptInfo() {
      // console.log(this.deptForm.parentDepartmentGuid);
      //获取上级部门信息
      this.$http({
        url: this.$http.adornUrl('/department/select-department-detail'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.deptForm.parentDepartmentGuid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.deptForm.parentDepartmentName =
            data.messageContent.departmentName
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    handleNodeClick(data) {
      console.log(this.unitGuid)
      this.departmentGuid = data.departmentGuid
      this.parentDepartmentGuid = data.parentDepartmentGuid
      this.deptForm.departmentGuid = data.departmentGuid
      this.departmentName = data.departmentName
      this.deptForm.parentDepartmentGuid = data.parentDepartmentGuid
      console.log(this.departmentName, this.departmentGuid)
     
      //获取当前部门信息
      this.$http({
        url: this.$http.adornUrl('/department/select-department-detail'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.deptForm.departmentGuid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let messageContent = data.messageContent || {}
          this.deptForm.departmentName = messageContent.departmentName || ''
          this.deptForm.departmentDirector =
            messageContent.departmentDirector || ''
          this.deptForm.parentDepartmentGuid =
            messageContent.parentDepartmentGuid || ''
          this.deptForm.parentDepartmentName =
            messageContent.parentDepartmentName || ''
          this.parentDeptForm.parentDepartmentName =
            messageContent.parentDepartmentName || ''
        } else {
          this.$message.error(data.errorMessage)
          this.searchInfo1 = {}
        }
      })
      //获取上级部门列表
      this.getParentDeptList()
      //选中当前上级目标
      // console.log(this.deptForm.parentDepartmentGuid);
      // if (this.deptForm.parentDepartmentGuid ===""){
      //   deptSelect.value = ""
      // }
      //编辑按钮可点
      this.btn_save_disabled = true
      this.btn_edit_disabled = false
    },
    //递归添加
    recursiveget(deptTree) {
      for (var i in deptTree) {
        deptTree[i].disabled = true
        if (deptTree[i].children) {
          this.recursiveget(deptTree[i].children)
        }
      }
    },
    //获取递归id
    getId(deptTree) {
      deptTree.forEach(ele => {
        if (ele.flag == true) {
          this.idArr.push(ele.id)
          if (ele.children && ele.children.length > 0) {
            this.getId(ele.children)
          }
        }
      })
    },
    getDeptTree() {
      this.$http({
        url: this.$http.adornUrl('/department/select-department-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.unitGuid,
          messageType: 0
        })
      }).then(({ data }) => {
        // console.log(data.messageContent);
        if (data.messageCode == 200) {
          this.deptTree = data.messageContent
          this.recursiveget(this.deptTree)
          // this.idArr = []
          // this.getId(this.deptTree)
          // console.log(this.deptTree)
        }
      })
    },
    //新增部门
    adddept() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinit(this.departmentGuid, this.departmentName)
        // console.log(this.departmentGuid,this.departmentName);
      })
    },
    //修改部门
    editdept() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.editinit(
          this.departmentGuid,
          this.parentDepartmentGuid
        )
      })
    },
    //删除部门
    deleteHandle() {
      if (this.departmentGuid === '') {
        this.$message({
          type: 'info',
          message: '请选择部门再进行删除！'
        })
        return
      }
      this.$confirm('此操作将删除该部门及所有相关人员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deletconfirm()
        })
        .catch(() => {})
    },
    deletconfirm() {
      // console.log(this.departmentGuid);
      this.$http({
        url: this.$http.adornUrl('/department/info-department-delete'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            agentGuid: this.userGuid,
            departmentGuid: this.departmentGuid,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs['deptForm'].resetFields()
          this.departmentName = ''
          this.departmentGuid = ''
          this.getDeptTree()
          this.btn_edit_disabled = true
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    },
    Edit() {
      this.btn_save_disabled = false
    },
    FormSubmit() {
      // console.log(this.deptForm);
      this.$http({
        url: this.$http.adornUrl('/department/info-department-update'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            agentGuid: this.userGuid,
            departmentDirector: this.deptForm.departmentDirector,
            departmentGuid: this.deptForm.departmentGuid,
            departmentName: this.deptForm.departmentName,
            parentDepartmentGuid: this.deptForm.parentDepartmentGuid,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 1500
            // onClose: () => {
            //   this.DialogFormVisible = false
            //   this.$emit('refreshDataList')
            // }
          })
          this.getDeptTree()
          this.btn_save_disabled = true
          this.btn_edit_disabled = true
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dept_main {
  /deep/.el-dialog--center .el-dialog__body {
    padding: 20px;
  }
  .all_main {
    // height: 85vh;
    .grid-content.bg-purple {
      overflow: hidden;
    }
    // min-width: 990px;
    .blank_filling {
      height: 100%;
      // border-left: 1px solid #ccc;
      // border-right: 1px solid #ccc;
      .bg-purple {
        height: 100%;
      }
    }
    .all_left {
      /deep/.el-button--mini,
      .el-button--mini.is-round {
        padding: 7px;
      }
      //  min-width: 200px;
      height: 100%;
      // border-top: 2px solid #ccc;
      // border-left: 2px solid #ccc;
      border-right: 1px solid #ccc;
      // border-bottom: 2px solid #ccc;
      .bg-purple {
        height: 100%;
        // overflow-x: scroll;
        white-space: nowrap;
        // padding: 0 5px 0 10px;
        .dept_list_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
        }
        .dept_option {
          border-bottom: 1px solid #e5e9f2;
          // text-indent: 20px;
          // height: 50px;
          line-height: 40px;
          padding: 0 5px;
          .bulk_import {
            // padding-left: 20px;
            .upload-demo {
              display: flex;
              align-items: center;
              /deep/.el-upload-list__item-name {
                margin-right: 22px;
              }
            }
          }
        }
        .page {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .department_tree {
          height: calc(100vh - 270px);
          overflow-y: auto;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }
          // width: 201px;
          // padding-top: 20px;
          font-weight: bolder;
          .custom-tree-node {
            padding-left: 10px;
            font-size: 15px;
            .colorfont {
              color: DeepSkyBlue;
            }
          }
        }
      }
    }
    .all_right {
      height: 100%;
      padding: 0px 5px;
      // border-top: 2px solid #ccc;
      // border-left: 1px solid #ccc;
      // border-right: 1px solid #ccc;
      // border-bottom: 1px solid #ccc;
      .bg-purple {
        height: 100%;
        .dept_details_title {
          text-indent: 22px;
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
        }
        .dept_info {
          padding-top: 20px;
        }
        .el-table th {
          display: table-cell !important;
        }
        .page {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .bg-purple {
    height: 100%;
    .el-table th {
      height: 100%;
      display: table-cell !important;
    }
    .page {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .header_select {
      // background-color: #F5F5F5;
      width: 100%;
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      .cardnumber,
      .username,
      .usernumber {
        display: flex;
        align-items: center;
        padding-left: 10px;
        width: 200px;
        div:nth-child(1) {
          width: 40px;
        }
      }
      .bulk_import {
        padding-left: 20px;
        .upload-demo {
          display: flex;
          align-items: center;
          /deep/.el-upload-list__item-name {
            margin-right: 22px;
          }
        }
      }
      .packge_batch {
        padding-left: 20px;
      }
    }
  }
}
</style>